<template>
	<view class="">
		<cu-custom bgColor="" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>

		<view class="editbox ">
			<view class="edit-touxiang middle">

				<view class="touxiang-box middle clickEffict" @click="ChooseImage()" >
					<view class="touxiangmask"></view>
					<image class="touxiang-img" :src="userInfo.headimgurl" mode="widthFix" ></image>
					<text class="iconfont iconxiangji"></text>
				</view>
				<view class="idstyle">
					<text>账号ID：{{userInfo.user_id}}</text>
				</view>

			</view>


			<view class="edit-info">
				<view class="edit-info-item middle ">
					<text class="edit-info-item-title">昵称</text>
					<input type="text" value="" class="inputinfo" placeholder="请输入你的昵称" v-model="userInfo.nickname" />
				</view>

				<view class="edit-info-item middle">
					<text class="edit-info-item-title">生日</text>
					<picker class="inputinfo pickerMiddle" mode="date" :value="userInfo.birthday" start="1960-09-01"
						end="2020-09-01" @change="DateChange">
						<view class="picker" v-if="userInfo.birthday!='null'">
							{{userInfo.birthday}}

						</view>
						<text class="iconfont iconjiantou right-icon clickEffict"></text>
					</picker>

				</view>
				<view class="edit-info-item middle">
					<text class="edit-info-item-title">性别</text>
					<view class="inputinfo genderBox">
						<view class="genderType middle clickEffict" @click="choseGender(0)"
							:class="userInfo.sex==0?'genderchose':'genderNO'">
							<text class="cuIcon-attentionforbidfill iconbiyan"></text> 保密
						</view>
						<view class="genderType middle clickEffict" @click="choseGender(1)"
							:class="userInfo.sex==1?'genderchose':'genderNO'">
							<text class="cuIcon-male iconnanxing"></text> 男生
						</view>
						<view class="genderType middle clickEffict" @click="choseGender(2)"
							:class="userInfo.sex==2?'genderchose':'genderNO'">
							<text class="cuIcon-female iconzuihoudinggao-"></text> 女生
						</view>
					</view>

				</view>
				<view class="edit-info-item middle " @click="openPass">
					<text class="edit-info-item-title">密码</text>
					<input type="password" disabled="" class="inputinfo" placeholder="请输入你的密码" value="*****" />
				</view>



			</view>


			<view class="saveBox clickEffict middle" @click="changeInfo()">
				保存设置
			</view>

		</view>
		<uni-popup ref="popup" type="center" :closeBtn="true" @top="hidemodel()">
			<view class="pass-box" style="margin-top: 20upx;" @tap.stop="">
			

				<input type="text" placeholder="输入原密码" style="margin-top: 20upx;" v-model="password_data.password_old"
					data-key="password_old" v-if="userInfo.password != ''" />
				<input type="password" placeholder="输入新密码" data-key="password" v-model="password_data.password" />
				<input type="password" placeholder="确认新密码" data-key="password_confirm"
					v-model="password_data.password_confirm" />
				<text class="btn-sure radius" @click="changePass" style="color: white;">确定</text>
			</view>
		</uni-popup>

	</view>

</template>

<script>
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
   
	export default {
		components: {
			uniPopup
		},
		name: "User",
		data() {
			return {
				title: "个人设置",
				StatusBar: this.StatusBar,
				date: '2018-12-25',
				serverUrl: this.apiHost + '/comm/imageUp',
				serverUrlDeleteImage: this.apiHost + '/comm/delupload',
				userInfo: {
					headimgurl: "",
					nickname: "",
					password: '',
					sex: 1,
					birthday: '',
					user_id: "",
				},
				password_data: {
					password_old: '',
					password: '',
					password_confirm: ''
				},
				domain:this.resDomain


			}


		},
		onLoad() {

			this.refresh();
		},
		mounted() {
			

		},
		methods: {
			/**
			 * 获取用户信息
			 */

			refresh() {
				this.apiRequest('/buyer/userInfo', {
					area_id: uni.getStorageSync('area_id')
				}).then(res => {
					this.userInfo.headimgurl = res.data.headimgurl;
					
					(res.data.birthday!=null)?(()=>{
						let d=res.data.birthday.split(" ");
						this.userInfo.birthday = d[0];
					})():(()=>{
						this.userInfo.birthday = "2008-09-01";
					})();
					
					
					this.userInfo.sex = res.data.sex;
					this.userInfo.nickname = res.data.nickname;
					this.userInfo.user_id = res.data.user_id;
		

				});

			},

			DateChange(e) {
				
				
				this.userInfo.birthday = e.detail.value
			},
			choseGender(type) {
				this.userInfo.sex = type;

			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], 
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						console.log(res);
						uni.uploadFile({
							url:this.serverUrl,
							fileType:"image",
							header:"",
							formData:{},
							filePath:res.tempFilePaths[0],
							name:"upload-images",
							success:(r)=>{
								this.userInfo.headimgurl=r.data;
							},
							fail:(e)=>{
								console.log(e);
							}
							
						})
						
					}
				});
			},
			changeInfo() {
				this.apiRequest('/buyer/userEdit', this.userInfo).then(res => {
					if(res.code==200){
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
				
					}
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
					
				})
			},
			openDate() {
				this.$refs.calendar.open();
			},
			confirmDate(e) {
			    
				
				this.apiRequest('/buyer/userEdit', {
					birthday: e.fulldate
				}).then(res => {
					
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			openPass() {
				this.$refs.popup.open()
			},
			closePass() {
				this.$refs.popup.close()
			},
			getUserInfo() {
				this.apiRequest('/buyer/userInfo', {
					area_id: uni.getStorageSync('area_id')
				}).then(res => {
					this.userInfo = res.data
				})
			},
			hidemodel(){
				this.$refs.popup.close()
			},
			changePass(e) {
				if (this.password_data.password != this.password_data.password_confirm) {
					uni.showToast({
						title: '两次输入的新密码不一致',
						icon: 'none'
					})
					return
				}
				this.apiRequest('/buyer/setPassword', this.password_data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 200) {
						//this.getUserInfo()
						this.$refs.popup.close()
					}
				})
			},



		}




	}
</script>

<style scoped>
	.editbox {
		width: 96vw;
		margin-left: 2vw;

	}

	.edit-touxiang {
		width: 100%;
		height: 20vh;
		flex-direction: column;
	}

	.touxiang-box {
		width: 18vw;
		height: 18vw;
		border-radius: 50%;
		overflow: hidden;
		position: relative;


	}

	.touxiang-img {
		top: -1upx;
		width: 110%;
		height: 110%;


	}

	.touxiangmask {
		width: 100%;
		height: 100%;
		z-index: 2;
		position: absolute;
		opacity: 0.3;
		background-color: #000000;
	}

	.iconxiangji {
		position: absolute;
		margin: auto;
		z-index: 999;
		font-size: 60upx;
		color: white;
	}

	.right-icon {
		position: absolute;
		float: right;
		right: 0%;
		top: 0;
		display: flex;
		align-items: center;
		height: 100%;
		color: #FF999999;
	}

	.idstyle {
		margin-top: 20upx;
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;


	}

	.edit-info {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
	}

	.edit-info-item {
		width: 100%;
		height: 100upx;

	}

	.edit-info-item-title {

		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.inputinfo {
		width: 80%;
		height: 90%;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 4%;
		position: relative;
		display: flex;
		flex-direction: row;
	}

	.border-bottom {
		border-bottom: 5upx solid #F1F1F1;
	}

	.genderBox {
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.genderType {
		height: 60%;
		padding-left: 15upx;
		padding-right: 15upx;
		border: 1px solid #DBDBDB;
		border-radius: 30upx;
		margin-left: 10upx;

	}

	.genderchose {

		background: #1270E0;
		color: white;
	}

	.genderNO {
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;


	}

	.saveBox {
		width: 100%;
		height: 100upx;
		margin-top: 2vh;

		background: #1270E0;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;

	}

	.pickerMiddle {
		display: flex;
		align-items: center;
	}
	
	.pass-box {
		width: 500rpx;
		background: #F7F7F7;
		border-radius: 20rpx;
		padding: 5% 0;
	}
	
	.pass-box input {
		border-bottom: 1px solid #EEEEEE;
		width: 80%;
		padding: 5rpx 10rpx;
		margin-left: 10%;
		margin-top: 10rpx;
		margin-bottom: 15rpx;
	}
	
	.pass-box .btn-sure {
		background: #1270e0;
		padding: 10rpx 0;
		width: 80%;
		text-align: center;
		margin-left: 10%;
		display: block;
	}

</style>
